<!--
 * @Author: your name
 * @Date: 2022-03-02 09:56:43
 * @LastEditTime: 2024-04-25 16:20:27
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \trace-source-web\src\views\trace-source-manage\components\productionTraceability\components\subject-information.vue
-->
<template>
  <!-- 加工信息 -->
  <el-card id="growing-two" class="box-card">
    <div slot="header" class="clearfix">
      <span>加工信息 PROCESSING</span>
    </div>
    <div v-if="false" class="growing-main">
      <div class="main-ern">
        <h3>加工设备</h3>
        <div class="ern">
          <div class="ern-left">
            <img
              src="~@/assets/trace-source-manage/processingTraceability/processing-machinery.png"
              alt=""
            />
          </div>
          <div class="ern-right">
            <p>
              <b>烘干机</b>
              <span>
                型号：SJFH6839
              </span>
            </p>
          </div>
        </div>
      </div>
      <div class="main-ern">
        <h3>加工配料</h3>
        <div class="ern">
          <div class="ern-left">
            <img
              src="~@/assets/trace-source-manage/processingTraceability/mixedIngredients.png"
              alt=""
            />
          </div>
          <div class="ern-right">
            <p>
              ——
            </p>
          </div>
        </div>
      </div>
      <div class="main-ern">
        <h3>加工时间</h3>
        <div class="ern">
          <div class="ern-left">
            <img
              src="~@/assets/trace-source-manage/processingTraceability/time.png"
              alt=""
            />
          </div>
          <div class="ern-right">
            <p>
              2021年12月09日 15:36:50
            </p>
          </div>
        </div>
      </div>
      <div class="main-ern">
        <h3>加工地点</h3>
        <div class="ern">
          <div class="ern-left">
            <img
              src="~@/assets/trace-source-manage/processingTraceability/address.png"
              alt=""
            />
          </div>
          <div class="ern-right">
            <p>
              南浔区旧馆镇共富路
            </p>
          </div>
        </div>
      </div>
      <div class="main-ern">
        <h3>加工人</h3>
        <div class="ern">
          <div class="ern-left">
            <img
              src="~@/assets/trace-source-manage/processingTraceability/fullName.png"
              alt=""
            />
          </div>
          <div class="ern-right">
            <p>
              张曦文 / 周新宇
            </p>
          </div>
        </div>
      </div>
      <div class="main-ern">
        <h3></h3>
        <div class="ern ern-end">
          <div class="ern-left">
            <vue-qr
              :text="downloadData.url"
              :margin="1"
              color-dark="#000"
              color-light="#fff"
              :dot-scale="1"
              :logo-scale="0.2"
              :size="100"
              :logo-src="downloadData.icon"
            />
          </div>
          <div class="ern-right">
            <h5>扫码溯源</h5>
            <p>我承诺对产品质</p>
            <p>量安全以及合格</p>
            <p>性和真实性负责</p>
          </div>
        </div>
      </div>
    </div>
    <div>
      <div class="base-zh-box zh-table-box">
        <div
          v-for="(zhisuitem, zhusuindex) in farmWorkList"
          :key="zhusuindex"
          class="zh-box-line"
        >
          <div class="box-line-icon">
            {{ zhusuindex + 1 }}
          </div>
          <b
            v-if="zhusuindex !== farmWorkList.length - 1"
            class="box-line-dotted"
          ></b>
          <div class="box-line-two">{{ zhisuitem.mach }}</div>
          <div class="box-line-main">
            <div :title="'加工设备:' + zhisuitem.machine + ' 型号:' + zhisuitem.model + ' 原料:' + zhisuitem.staple" class="line-name">
              <h5>加工设备:</h5>
              <span>{{ zhisuitem.machine }}</span>
              <span>型号: {{ zhisuitem.model }}</span>
              <span>原料: {{ zhisuitem.staple }}</span>
            </div>
            <div :title="'加工人:' + zhisuitem.Processor" class="line-name">
              <h5>加工人:</h5>
              <span>{{ zhisuitem.Processor }}</span>
            </div>
            <div :title="'加工时间:' + zhisuitem.time" class="line-name">
              <h5>加工时间:</h5>
              <span>{{ zhisuitem.time }}</span>
            </div>
            <span
              class="batclick"
            >
              <el-button>
                <h4>详情</h4>
              </el-button>
            </span>
          </div>
        </div>
      </div>
    </div>
  </el-card>
</template>

<script>
import vueQr from "vue-qr";
// import SvgIcon from '@/components/SvgIcon'
export default {
  components: {
    // SvgIcon
    vueQr
  },
  props: {
    batchBaseMessageList: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      farmWorkList: [
        {
          mach: "烘干",
          machine: "烘干机",
          model: "SHGJ2345",
          staple: "水稻",
          Processor: "朱旭东",
          time: "2022年3月18日 15:22:33"
        },
        {
          mach: "脱壳",
          machine: "砻谷机",
          model: "NSWJ3246",
          staple: "水稻",
          Processor: "朱旭东",
          time: "2022年3月18日 15:22:33"
        },
        {
          mach: "碾米",
          machine: "碾米机",
          model: "SJFH6839",
          Processor: "沈威",
          staple: "糙米",
          time: "2022年3月20日 15:22:33"
        },
        {
          mach: "包装",
          machine: "包装机",
          model: "SBZJ4576",
          staple: "大米",
          Processor: "张帆",
          time: "2022年3月17日 15:22:33"
        }
      ],
      // 二维码数据
      downloadData: {
        url:
          `${this.$webSerUrl}source/#/?batchNo=3&databaseName="DB_TDW1_CXXC"`,
        icon: require("@/assets/trace-source-manage/yezi.png")
        // icon: 'https://img.js.design/assets/img/615fd67a91d8f56085f05f4a.png'
      }
    };
  },
  methods: {
    // 跑马灯左右切换
    prev() {
      this.$refs.grfix.prev();
    },
    next() {
      this.$refs.grfix.next();
    }
  }
};
</script>

<style lang="scss" scoped>
.batclick {
  // padding-bottom: 10px;
  display: inline-block;
  margin-bottom: 10px;
  width: 100px;
  text-align: center;
  .el-button {
    width: 80%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    border-radius: 15px;
    height: 33px;
    line-height: 12px;
    background-color: #007795;
    color: #fffff0;
    border-color: #007795;
    span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    border-radius: 15px;
      width: 100%;
      display: block;
    }
    h4 {
      // display: none;
      margin: 0;
      padding: 0;
    }
  }
  .el-button:hover {
    color: #01fde0;
    border-color: #01fde0;
    // span {
    //   display: none;
    // }
    // h4 {
    //   display: block;
    // }
  }
}
#growing-two {
  .el-input {
    margin-left: 10px;
    width: 50%;
    ::v-deep .el-input__inner {
      border: 0;
      height: 25px;
      background-color: rgba($color: #0e4352, $alpha: 1);
      border-radius: 40px;
      text-align: center;
    }
  }
  ::v-deep .el-card__body {
    padding: 0;
    padding-bottom: 20px;
    padding-top: 10px;
    .growing-main {
      display: flex;
      flex-wrap: wrap;
      flex-direction: row;
      justify-content: space-around;
      .main-ern {
        width: 31%;
        height: 200px;
        margin-bottom: 30px;
        > h3 {
          height: 20px;
          font-family: "微软雅黑", "楷体", "宋体";
        }
        .ern {
          width: 100%;
          height: calc(100% - 40px);
          background: rgba(0, 57, 71, 1);
          border: 1px solid rgba(0, 57, 71, 1);
          border-radius: 2px;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 18px;
          .ern-left {
            width: 30%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
          }
          .ern-right {
            width: 70%;
            height: 100%;
            // background: #46ff40;
            display: flex;
            justify-content: flex-start;
            align-items: center;
          }
        }
        .ern-end {
          .ern-left {
            width: 50%;
            height: 100%;
            display: flex;
            justify-content: flex-end;
            padding-right: 20px;
            align-items: center;
          }
          .ern-right {
            width: 50%;
            height: 100%;
            padding-left: 20px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: flex-start;
            h5 {
              width: 50%;
              text-align: center;
              margin: 0 0 12px 0;
              font-size: 18px;
            }
            p {
              font-size: 16px;
              padding: 0;
              margin: 0 0 2px 0;
              color: #ffffff80;
            }
          }
        }
      }
    }
    .honorary {
      width: 99%;
      height: 400px;
      margin: 10px 10px auto;
      box-sizing: border-box;
      display: flex;
      justify-content: space-around;
      background: #0f4656;
    }

    .base-zh-frequency {
      position: absolute;
      right: 10px;
      top: 10px;
      color: rgba(130, 229, 255, 1);
      font-size: 18px;
    }
    .base-zh-box {
      width: calc(100% - 20px);
      margin-left: 10px;
      margin-bottom: 10px;
      min-height: 100px;
      // max-height: 400px;
      box-sizing: border-box;
      // padding-top: 50px;
      background-color: rgba($color: #003947, $alpha: 0.55);
      overflow-y: auto;
      .zh-box-line {
        width: calc(100% - 40px);
        margin-left: 20px;
        padding-bottom: 45px;
        // height: 40px;

        // background-color: rgba(22, 101, 124, 1);
        line-height: 40px;
        color: #fff;
        display: flex;
        justify-content: flex-start;
        flex-direction: row;
        position: relative;
        .box-line-one {
          margin-right: 20px;
        }
        .box-line-icon {
          width: 72px;
          height: 72px;
          background-color: rgba(113, 205, 230, 1);
          border-radius: 50%;
          display: flex;
          justify-content: center;
          align-items: center;
          margin-left: 3%;
          font-size: 30px;
          img {
            width: 40%;
            height: 40%;
            border: none;
            border-radius: 0;
          }
        }
        .box-line-dotted {
          position: absolute;
          height: 95%;
          border-left: 3px dashed rgba(113, 205, 230, 1);
          top: 45%;
          left: calc(3% + 35px);
        }
        .box-line-two {
          width: 10%;
          font-size: 30px;
          margin-left: 15px;
          margin-top: 15px;
          color: rgba(113, 205, 230, 1);
        }
        .box-line-main {
          position: absolute;
          right: 1%;
          width: 87%;
          // border: 1px solid rgba(229, 229, 229, 0.5);
          border-radius: 5px;
          box-sizing: border-box;
          padding: 5px;
          display: flex;
          align-items: center;
          justify-content: space-evenly;
          height: 70px;
          .line-name {
            width: 30%;
            display: flex;
            align-items: center;
            justify-content: flex-start;
            font-size: 18px;
            background-color: rgba($color: #073e4e, $alpha: 1);
            padding-left: 10px;
            h5 {
              font-size: 22px;
              font-weight: 300;
              margin: 10px 0;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
            span {
              display: inline-block;
              // width: 60%;
              height: 40px;
              // border: 1px solid rgba(229, 229, 229, 0.5);

              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              box-sizing: border-box;
              padding: 0 15px;
              margin-left: 15px;
              border-radius: 5px;
            }
          }
          .line-name:first-child {
            width: 40%;
          }
          .line-name:nth-child(2) {
            width: 15%;
          }
        }
      }
      .zh-box-circle {
        width: calc(100% - 40px);
        padding: 20px 20px;
        min-height: 250px;
        background-color: rgba($color: #0e4352, $alpha: 1);
        overflow-x: auto;
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        flex-wrap: wrap;
        flex-direction: row;
        .box-circle-item {
          // width: 25%;
          // width: 136px;
          margin: 0 30px 30px;
          // margin-top: 35px;
          // height: 150px;
          // background-color: aqua;
          // display: flex;
          // justify-content: center;
          // flex-direction: column;
          // align-items: center;
          position: relative;
          .circle-item-line {
            position: absolute;
            left: 50%;
            top: 40%;
            transform: translate(-50%, -40%);
            // bottom: 90px;
            word-wrap: break-word;
            height: 30px;
            line-height: 20px;
            font-size: 22px;
            text-align: center;
          }
          .circle-item-lineone {
            position: absolute;
            // position: relative;
            left: 50%;
            // top: 30%;
            transform: translate(-50%, 12%);
            // bottom: -3px;
            // word-wrap: break-word;
            white-space: nowrap;
            width: 100%;
            overflow: hidden;

            height: 30px;
            text-overflow: ellipsis;
            line-height: 20px;
            text-align: center;
          }
          .circle-item-linetwo {
            position: absolute;
            left: 50%;
            top: 60%;
            transform: translate(-50%, -60%);
            bottom: 100px;
            text-align: center;
            width: 100%;
            height: 30px;
            line-height: 30px;
          }
        }
      }
      .zh-box-table {
        // height: 300px;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 10px 0;
        position: relative;
      }
      .agri {
        display: block;
        .agri-page {
          position: relative;
          // width: 100%;
          height: 40px;
          .pagination {
            position: absolute;
            right: 0px;
            bottom: 2px !important;
            .el-pager,
            .el-pager li {
              display: inline-block !important;
            }
          }
        }
      }
      .zh-box-suyuan {
        widows: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 20px;
        margin-top: 20px;
        flex-direction: column;
      }
    }
    .zh-table-box {
      max-height: 100%;
      padding-top: 50px;
      max-height: 620px;
    }
    .zh-table {
      max-height: 100%;
    }
  }
}

.zh-lable {
  width: 80px;
  white-space: nowrap;
  font-size: 16px;
}
.next {
  i {
    font-size: 100px;
    color: #fff;
  }
}
.prev {
  i {
    font-size: 100px;
    color: #fff;
  }
}

.prev:hover,
.next:hover {
  i {
    color: #409eff;
  }
}
// 跑马灯 过渡
::v-deep .el-carousel__item.is-in-stage {
  opacity: 1;
}
::v-deep .el-carousel__item {
  opacity: 0;
  transition: 0.5s;
}
</style>
